import React, { Component } from 'react'

import HomeStyleComp from './HomeStyleComp.js'

import Banner from './Banner'

import Selector from './Select'

import HomeList from './Homelist'

import { connect } from 'react-redux'
                    
import { bindActionCreators } from 'redux'

import { actionCreators } from './store'

import BScroll from 'better-scroll'

class Home extends Component {
   constructor(){
       super()
       this.state={
           newlist_p1:[],
           newlist_p2:[],
           listFlag:null,
 
   }
}
    //定义一个方法，用来接收HomeList组件传来的数据
  
    render() {
        
        return (
            <HomeStyleComp ref={el =>this.HomeStyleComp =el }>
                <div>
                    <Banner banners={this.props.banners}/>
                    <Selector/>
                    <div className="limit_discount">
                        <div className="time_up">
                            <a>

                                <img src="https://s2.juancdn.com/jas/190826/0/4/5d63378733b08935ab4f6cab_540x656.gif" alt=""/>
                            </a>
                        </div>
                        <div className="brand">
                            <div className="brand_drop">
                                <a>
                                    <img src="https://goods4.juancdn.com/jas/190823/7/1/5d5fad5bb6f8ea1dd9229a44_540x328.png?imageMogr2/quality/85!/format/png" alt=""/>
                                </a>
                            </div>
                            <div className="brand_profit">
                                <a>
                                    <img src="https://goods3.juancdn.com/jas/190823/5/1/5d5fb68233b0896b3f453d9d_540x328.png?iopcmd=convert&Q=85&dst=png" alt=""/>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div className="go">
                        <a>
                            <img src='https://s2.juancdn.com/jas/190822/1/5/5d5e4cd1b6f8ea09ce5ef5e7_1080x300.gif' alt=""/>
                        </a>
                    </div>
                    <div className="handpick">
                        <a>
                            <img src="https://goods7.juancdn.com/jas/180518/c/6/5afe2f0db6f8ea096f2bfb35_1080x138.png?iopcmd=convert&Q=85&dst=png"/>
                        </a>
                    </div>
                    <HomeList ref = { el =>this.HomeList = el}
                    homelists_p1={this.state.newlist_p1} 
                    homelists_p2={this.state.newlist_p2}
                    />
                </div>
               
            </HomeStyleComp>
        );
    }

    componentDidMount() {
        this.props.get_banner()
        if(this.HomeList.state.listFlag){
            this.props.get_homelist_p1(1)
        }else{
            this.props.get_homelist_p2(1)
        }
         //上拉加载
         setTimeout(() => {
            this.bscroll= new BScroll(this.HomeStyleComp , {
                click:true,//可以实现点击
                pullUpLoad:{//开启上拉加载
                    threshold:50
                },
                propbeType:1
            })

            let page1=2;
            let page2=2;

            this.bscroll.on('pullingUp',()=>{
            if(this.HomeList.state.listFlag){
                this.props.get_homelist_p1(page1) 
                 page1++;
            }else{
                this.props.get_homelist_p2(page2); 
                page2++;
            }
            
               
               
                
                this.bscroll.finishPullUp()//结束上拉动作，可以进行第二次上拉
            })
           
          },500); 
    }

    componentWillReceiveProps(nextprops){
        if(this.HomeList.state.listFlag){
            let data_p1=this.state.newlist_p1
            this.setState({
                newlist_p1:data_p1.concat(nextprops.homelists_p1),
            })
        }else{
            let data_p2=this.state.newlist_p2
            this.setState({
                newlist_p2:data_p2.concat(nextprops.homelists_p2)
            })
        }
       
       }

}


export default connect(
    state=>state.home_reducer,
    dispatch=>bindActionCreators( actionCreators , dispatch )
    )(Home);